<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				width: 400px;
				height: 80px;
				border-collapse: collapse;
			}
			
			table tr {
				width: 40px;
				height: 30px;
			}
			
			#ipt {
				width: 1px;
				height: 10px;
			}
			
			table th,
			td {
				border: solid 1px red;
			}
			
			#delate {
				cursor: pointer;
				color: red;
			}
			
			#edit {
				cursor: pointer;
				color: blue;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<table>
				<thead>
					<tr>
						<th>姓名(id)</th>
						<th>性别(sex)</th>
						<th>年龄(age)</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<!--<tr>
						<td>张倩</td>
						<td>0</td>
						<td>24</td>
						<td>
							<input type="button" id="ipt" />
							<span id="delate">删除</span>
							<input type="button" id="ipt" />
							<span id="edit">编辑</span>
						</td>
					</tr>-->
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			var arr = [
			    {id: "张倩",sex: 0,age: 24},
				{id: "薛之谦",sex: 1,age: 67},
				{id: "迪丽热巴",sex: 0,age: 24},
				{id: "郑凯",sex: 1,age: 24}
		     ]
			var tbody = document.getElementById("tbody");
			tbody.innerHTML = "";
			var str = "";
/*			str+="<tr>"+"<td>"+arr[0].id+"</td>"+"<td>"+(arr[0].sex=="1"?"小哥哥":"小姐姐")+"</td>"+"<td>"+arr[0].age+"</td>"+
						"<td>"+"<span id='delate'>删除</span>"+"<span id='edit'>  编辑</span>"+"</td>"+
					"</tr>"
			str+="<tr>"+"<td>"+arr[1].id+"</td>"+"<td>"+(arr[1].sex=="1"?"小哥哥":"小姐姐")+"</td>"+"<td>"+arr[1].age+"</td>"+
						"<td>"+"<span id='delate'>删除</span>"+"<span id='edit'>  编辑</span>"+"</td>"+
					"</tr>"
			str+="<tr>"+"<td>"+arr[2].id+"</td>"+"<td>"+(arr[2].sex=="1"?"小哥哥":"小姐姐")+"</td>"+"<td>"+arr[2].age+"</td>"+
						"<td>"+"<span id='delate'>删除</span>"+"<span id='edit'>  编辑</span>"+"</td>"+
					"</tr>"
			str+="<tr>"+"<td>"+arr[3].id+"</td>"+"<td>"+(arr[3].sex=="1"?"小哥哥":"小姐姐")+"</td>"+"<td>"+arr[3].age+"</td>"+
						"<td>"+"<span id='delate'>删除</span>"+"<span id='edit'>    编辑</span>"+"</td>"+
					"</tr>"*/
					
			for(var i=0;i<arr.length;i++){
				console.log(arr[i]);
				str+="<tr>"+
				        "<td>"+arr[i].id+"</td>"+
				        "<td>"+(arr[i].sex=="1"?"小哥哥":"小姐姐")+"</td>"+
				        "<td>"+arr[i].age+"</td>"+
						"<td>"+
						      "<span id='delate'>删除</span>"+
						      "<span id='edit'>  编辑</span>"+ 
						"</td>"+
					"</tr>"
			}
			tbody.innerHTML=str		
			
			
			//步骤：
			//1.设计一个静态页面，分清静态和动态数据 ，tbody和thead，设计样式
			//2、创建一个数组，数组中放动态的内容，设计出thead和tbody中的内容，
			//   其中thead对应内容为数组中对象的属性名，tbody对应的内容为属性值
			//3、并将动态添加的部分注释， 找到要插入数据的dom对象,清空tbody:tbody.innerHTML="";
			//4、声明一个空字符串，将清空的tbody中的内容放到空字符串中:tbody.innerHTML=str
			//5、将以上新的字符串中的静态数据变成字符串，动态数据编辑成  arr[i].属性名  的形式，
			//  （性别选择时可用到三目运算符）并将静态和动态数据相加
			//6、变化动态数据即可看到相对应的变化
		</script>

	</body>

</html>